/*
==================================
  page-tab 组件样式
==================================
*/
.hl-page-tab-container{
  height: 56px;
  line-height: 56px;
  background-color: #F7F7F7;
  overflow: hidden;
  box-sizing: border-box;
}

.hl-page-tab-container .hl-page-tab-item{
  float: left;
  padding: 0 7px;
  box-sizing: border-box;
  margin-right: 50px;
  color:#666666;
  font-size: 16px;
  cursor: pointer;
}

.hl-page-tab-container .hl-page-tab-item.active{
  color:#5e67a5;
  font-weight: bolder;
  border-bottom: 3px solid #5e67a5;
}
.hl-page-tab-container .hl-page-tab__title{
  float: right;
  color:#999;
  font-size: 14px;
  margin-right: 22px;
  line-height: 56px;
}


/*
==================================
  hl-button 组件样式
==================================
*/
.hl-button{
  box-sizing: border-box;
  display: inline-block;
  padding: 6px 8px;
  height: 34px;
  line-height: 22px;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  touch-action:manipulation;
  cursor: pointer;
  user-select: none;
  border-radius: 4px;
}

.hl-button .icon{
  font-weight: bold;
}

.hl-button+.hl-button {
    margin-left: 10px;
}

.hl-button.hl-button-default{
  background: -webkit-gradient(linear, 0 0, 0 bottom, from(#fcfcfc), to(#ececec));
  color:#666;
  border:1px solid #e5e5e5;
}

.hl-button.hl-button-outline{
  background-color: #fff;
  color:#5e67a5;
  border: 1px solid #5e67a5;
}

.hl-button.hl-button-primary{
  background-color: #5e67a5;
  color:#fff;
  border: none;
}

.hl-button.hl-button-text{
  background-color: #fff;
  color:#5e67a5;
  border: none;
  font-weight: normal;
}

.hl-button.hl-button-default:hover,
.hl-button.hl-button-default:focus
{
  background:-webkit-gradient(linear, 0 0, 0 bottom, from(#EBEBEB), to(#E4E4E4));
}

.hl-button.hl-button-primary:hover,
.hl-button.hl-button-primary:focus
{
  background-color: #3F4780;
}

.hl-button.hl-button-outline:hover,
.hl-button.hl-button-outline:focus
{
  color:#3F4780;
  border: 1px solid #3F4780;
}

.hl-button.hl-button-mini{
  width:76px;
}
.hl-button.hl-button-small{
  width:96px;
}
.hl-button.hl-button-medium{
  width:110px;
}
.hl-button.hl-button-large{
  width:130px;
}

.hl-button.is-disabled{
  opacity: 0.5;
  cursor:not-allowed;
}
.hl-button.is-loading{
  opacity: 0.5;
  cursor:not-allowed;
}

.hl-button .hl-icon-loading{
  animation: rotating 2s linear infinite;
}


/*
==================================
  hl-checkbox-button 组件样式
==================================
*/
.hl-merge-checkbox-button{
  cursor: pointer;
  margin:10px 0;
  border: 1px solid #e5e5e5;
  border-radius: 4px;
  box-sizing: border-box;
  overflow: hidden;
}

.hl-merge-checkbox-button .item{
  font-size: 14px;
  color:#666;
  height: 32px;
  line-height: 32px;
  text-align: center;
  padding: 0 10px;
  border-right: 1px solid #e5e5e5;
  box-sizing: border-box;
}

.hl-merge-checkbox-button .item:last-child{
  border-right: none;
}

.hl-merge-checkbox-button .item.active{
  background-color:#5e67a5;
  color:#fff;
}

.hl-merge-checkbox-button .item{
  float: left;
}

.hl-merge-checkbox-button.item:last-child{
  border-right: none;
}

.hl-seperate-checkbox-button .flex-row{
  cursor: pointer;
  display: flex;
  // justify-content: space-between;
  margin-bottom: 10px;
}
.hl-seperate-checkbox-button .item{
  font-size: 14px;
  color:#5e67a5;
  height: 32px;
  line-height: 32px;
  text-align: center;
  padding: 0 10px;
  border: 1px solid #5e67a5;
  margin-right: 12px;
  box-sizing: border-box;
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
  background-color: #fff;
}
.hl-seperate-checkbox-button .item:last-child{
  margin-right: 0;
}

.hl-seperate-checkbox-button .item.active{
  background-color:#5e67a5;
  color:#fff;
}

/*
==================================
  hl-checkbox 组件样式
==================================
*/
.hl-checkbox-container .item{
  position: relative;
  margin-right: 20px;
  margin-bottom: 20px;
  cursor: pointer;
}

.hl-checkbox-container .item.is-inline{
  display: inline-block;
}

.hl-checkbox-container .hl-checkbox-inner{
  position: absolute;
  border:1px solid #5e67a5;
  border-radius: 2px;
  box-sizing: border-box;
  width: 14px;
  height: 14px;
  z-index: 1;
  left:0;
  top:3px;
}

.hl-checkbox-container .hl-checkbox-inner::after{
  box-sizing: content-box;
  content: '';
  border: 2px solid #fff;
  border-left:0;
  border-top:0;
  height: 7px;
  left:4px;
  position: absolute;
  top:1px;
  transform: rotate(45deg) scaleY(0);
  width: 3px;
  transform: 0.15s ease-in .05s;
  transform-origin: center;
}

.hl-checkbox-container .hl-checkbox-label{
  color:#666;
  font-size: 14px;
  padding-left: 28px;
}

.hl-checkbox-container .item.is-checked .hl-checkbox-inner{
  background-color: #5e67a5;
  border: 1px solid #5e67a5;
}

.hl-checkbox-container .item.is-checked .hl-checkbox-inner::after{
  transform: rotate(45deg) scaleY(1);
}

.hl-checkbox-container .item.is-checked .hl-checkbox-label{
  color:#5e67a5;
}

/*
==================================
  hl-radio 组件样式
==================================
*/
.hl-radio-container .item{
  position: relative;
  margin-right: 34px;
  cursor: pointer;
}

.hl-radio-container .item.is-inline{
  display: inline-block;
}

.hl-radio-container .hl-radio-inner{
  position: absolute;
  border:1px solid #666666;
  border-radius: 2px;
  box-sizing: border-box;
  width: 13px;
  height: 13px;
  border-radius: 13px;
  z-index: 1;
  left:0;
  top:50%;
  transform: translate(0,-50%);
}

.hl-radio-container .hl-radio-label{
  color:#666;
  font-size: 14px;
  padding-left: 20px;
}

.hl-radio-container .item.is-checked .hl-radio-inner{
  border: 1px solid #5e67a5;
  background-color: #5e67a5;
}

.hl-radio-container .item.is-checked .hl-radio-inner::after{
  box-sizing: content-box;
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 4px;
  position: absolute;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
  transition: transform .15s ease-in .05s;
  transform-origin: center;
  background-color: #fff;
}

.hl-radio-container .item.is-checked .hl-radio-label{
  color:#5e67a5;
}

/*
==================================
  hl-select 组件样式
==================================
*/
.hl-select-container{
  position: relative;
  display: inline-block;
  box-sizing: border-box;
}

.hl-select-container.is-block{
  display: block;
}

.hl-select-container .input-wrap{
  position: relative;
  line-height: 34px;
}

.hl-select-container .input-wrap.hl-select-default input{
  background-color: #f9f9f9;
  border: 1px solid #f9f9f9;
}

.hl-select-container .input-wrap.hl-select-primary input{
  background-color: #fff;
  border:1px solid rgba(229,229,229,1);
  box-shadow:0px 0px 4px 0px #E5E5E5 inset;
}

.hl-select-container .input-wrap.hl-select-text input{
  background-color: #fff;
  border: 1px solid transparent;
}

.hl-select-container .input-wrap input{
  box-sizing: border-box;
  position: relative;
  width: 100%;
  height: 34px;
  line-height: 34px;
  padding: 0 20px 0 10px;
  color:#666;
  border-radius:4px;
  cursor: pointer;
}

.hl-select-container .input-wrap.hl-select-default input:focus{
  border: 1px solid #5AA9E1;
  outline: 0;
}

.hl-select-container .input-wrap.hl-select-primary input:focus{
  border-color: #98c3ed;
  outline: 0;
  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
          box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
}

.hl-select-container .input-wrap input::-webkit-input-placeholder{
  color:#CCCCCC;
}

.hl-select-container .input-wrap .icon{
  position: absolute;
  right:18px;
  top:40%;
  transform: translate(0,-50%);
  color:#D8D8D8;
}

.hl-select-container .input-wrap .hl-add-icon{
  position: absolute;
  right:8px;
  top:50%;
  transform: translate(0,-50%);
  color:#D8D8D8;
  font-size: 12px;
}

.hl-select-container .input-wrap .hl-arrow-down-icon::before{
  position: absolute;
  content: '';
  width: 0;
  height: 0;
  border-width: 6px;
  border-style: solid dashed dashed dashed;
  border-color: #dbdbdb transparent transparent transparent;
}

.hl-select-dropdown-wrap{
  position: absolute;
  top:35px;
  left:0;
  right:0;
  box-shadow: 0px 2px 4px 0px rgba(153,153,153,0.5);
  border-radius: 4px;
  overflow-y: scroll;
  background-color: #fff;
  z-index: 999;
  padding: 4px 0;
}

.hl-select-dropdown-wrap .first-level-wrap .first-name{
  height: 34px;
  line-height: 34px;
  padding: 0 10px;
  color:#4B4B4B;
  font-weight:bold;
}

.hl-select-dropdown-wrap .item{
  position: relative;
  width: 100%;
  height: 34px;
  line-height: 34px;
  color:#666666;
  padding: 0 10px;
  box-sizing: border-box;
  overflow: hidden;
  cursor: pointer;
}

.hl-select-dropdown-wrap .item:hover{
  background-color: #f9f9f9;
}

.hl-select-dropdown-wrap.single .item.is-selected{
  background-color: #5e67a5;
  color:#fff;
}


.hl-select-dropdown-wrap.multiple .item .name{
  box-sizing: border-box;
}
.hl-select-dropdown-wrap.multiple .item .select-icon{
  background-color: #fff;
  display: inline-block;
  position: absolute;
  right:10px;
  top:50%;
  transform: translate(0,-50%);
  border:1px solid #dcdfe6;
  border-radius: 2px;
  box-sizing: border-box;
  width: 14px;
  height: 14px;
  z-index: 1;
}
.hl-select-dropdown-wrap.multiple .item .select-icon::after{
  box-sizing: border-box;
  content: '';
  border: 2px solid #5e67a5;
  border-left: 0;
  border-top: 0;
  height: 7px;
  left:4px;
  position: absolute;
  top:2px;
  transform: rotate(45deg) scaleY(0);
  width: 4px;
  transition: transform .15s ease-in .05s;
  transform-origin: center;
}

.hl-select-dropdown-wrap.multiple .item.is-checked{
  background-color: #5e67a5;
  color:#fff;
}

.hl-select-dropdown-wrap.multiple .item.is-checked .select-icon{
  background-color: #fff;
  color:#5e67a5;
}
.hl-select-dropdown-wrap.multiple .item.is-checked .select-icon::after{
  transform: rotate(45deg) scaleY(1);
}

.hl-select-dropdown-wrap.multiple .item .selected-icon{
  display: inline-block;
  position: absolute;
  right:10px;
  top:50%;
  transform: translate(0,-50%);
  box-sizing: border-box;
  width: 14px;
  height: 14px;
  z-index: 1;
}

.hl-select-dropdown-wrap.multiple .item .selected-icon::after{
  box-sizing: border-box;
  content: '';
  border: 2px solid #5e67a5;
  border-left: 0;
  border-top: 0;
  height: 7px;
  left:4px;
  position: absolute;
  top:2px;
  transform: rotate(45deg) scaleY(0);
  width: 4px;
  transition: transform .15s ease-in .05s;
  transform-origin: center;
}

.hl-select-dropdown-wrap.multiple .item.is-selected .selected-icon::after{
  transform: rotate(45deg) scaleY(1);
}

/*
==================================
  hl-operation-select 组件样式
==================================
*/
.hl-operation-select__container{
  position: relative;
  display: inline-block;
  box-sizing: border-box;
}

.hl-operation-select__container.is-block{
  display: block;
}

.hl-operation-select__container .hl-operation-select__input-wrap{
  position: relative;
  line-height: 34px;
}

.hl-operation-select__container .hl-operation-select__input-wrap.hl-select-primary input{
  background-color: #565E99;
  border:1px solid #565E99;
}

.hl-operation-select__container .hl-operation-select__input-wrap input{
  box-sizing: border-box;
  position: relative;
  width: 100%;
  height: 34px;
  line-height: 34px;
  padding: 0 10px 0 20px;
  color:#fff;
  border-radius:4px;
  cursor: pointer;
}

.hl-operation-select__container .hl-operation-select__input-wrap.hl-select-primary input:focus{
  border: 1px solid #5AA9E1;
  outline: 0;
}

.hl-operation-select__container .hl-operation-select__input-wrap input::-webkit-input-placeholder{
  color:#fff !important;
}

.hl-operation-select__container .hl-operation-select__input-wrap .icon::before{
  position: absolute;
  content: '';
  width: 0;
  height: 0;
  border-width: 6px;
  border-style: solid dashed dashed dashed;
  border-color: transparent transparent transparent #fff;
}

.hl-operation-select__container .hl-operation-select__input-wrap .hl-arrow-right-icon{
  position: absolute;
  left:7px;
  top:33%;
}

.hl-operation-select__container .hl-operation-select__input-wrap .hl-arrow-right-icon::before{
  border-color: transparent transparent transparent #fff;
}

.hl-operation-select__container .hl-operation-select__input-wrap .hl-arrow-down-icon{
  position: absolute;
  left:7px;
  top:40%;
}

.hl-operation-select__container .hl-operation-select__input-wrap .hl-arrow-down-icon::before{
  border-color: #fff transparent transparent transparent;
}

.hl-operation-select__dropdown{
  position: absolute;
  top:35px;
  left:0;
  right:0;
  box-shadow: 0px 2px 4px 0px rgba(153,153,153,0.5);
  border-radius: 4px;
  overflow-y: scroll;
  background-color: #fff;
  z-index: 999;
  padding: 4px 0;
}

.hl-operation-select__dropdown .first-level-wrap .first-name{
  height: 34px;
  line-height: 34px;
  padding: 0 10px;
  color:#4B4B4B;
  font-weight:bold;
}

.hl-operation-select__dropdown .hl-operation-select__item{
  position: relative;
  width: 100%;
  height: 34px;
  line-height: 34px;
  color:#666666;
  padding: 0 10px;
  box-sizing: border-box;
  overflow: hidden;
  cursor: pointer;
}

.hl-operation-select__dropdown .hl-operation-select__item .operation-icon{
  position: absolute;
  top:50%;
  transform: translate(0,-50%);
  color:#fff;
}

.hl-operation-select__dropdown .hl-operation-select__item .operation-icon:nth-child(2){
  right:10px;
}

.hl-operation-select__dropdown .hl-operation-select__item .operation-icon:nth-child(3){
  right:35px;
}

.hl-operation-select__dropdown .hl-operation-select__item .operation-icon:nth-child(4){
  right:60px;
}


.hl-operation-select__dropdown .hl-operation-select__item:hover{
  background-color: #f9f9f9;
}

.hl-operation-select__dropdown .hl-operation-select__item:hover .operation-icon{
  color:#999;
}
.hl-operation-select__dropdown .hl-operation-select__item.is-selected .operation-icon{
  color:#fff;
}

.hl-operation-select__dropdown .hl-operation-select__item.is-selected{
  background-color: #5e67a5;
  color:#fff;
}

/*
==================================
  hl-autocomplete 组件样式
==================================
*/
.hl-autocomplete__container{
  position: relative;
}
.hl-autocomplete__header{
  position: relative;
}
.hl-autocomplete__header .hl-autocomplete__input{
  box-sizing: border-box;
  position: relative;
  width: 100%;
  height: 34px;
  line-height: 34px;
  padding: 0 20px 0 10px;
  color:#666;
  border-radius:4px;
  cursor: pointer;
}

.hl-autocomplete__header.hl-autocomplete-default .hl-autocomplete__input{
  background-color: #f9f9f9;
  border: 1px solid #f9f9f9;
}

.hl-autocomplete__header.hl-autocomplete-primary .hl-autocomplete__input{
  background-color: #fff;
  border:1px solid rgba(229,229,229,1);
  box-shadow:0px 0px 4px 0px #E5E5E5 inset;
}

.hl-autocomplete__header.hl-autocomplete-text .hl-autocomplete__input{
  background-color: #fff;
  border: 1px solid transparent;
}

.hl-autocomplete__header.hl-autocomplete-default .hl-autocomplete__input:focus{
  border: 1px solid #5AA9E1;
  outline: 0;
}

.hl-autocomplete__header.hl-autocomplete-primary .hl-autocomplete__input:focus{
  border: 1px solid #5AA9E1;
  box-shadow:0px 0px 6px 0px rgba(105,191,214,0.5);
}

.hl-autocomplete__header .hl-autocomplete__input::-webkit-input-placeholder{
  color:#CCCCCC !important;
}

.hl-autocomplete-dropdown__container{
  position: absolute;
  top:35px;
  left:0;
  right:0;
  box-shadow: 0px 2px 4px 0px rgba(153,153,153,0.5);
  background-color: #fff;
  border-radius: 4px;
  overflow-y: scroll;
  z-index: 999;
}

.hl-autocomplete-dropdown__container .hl-autocomplete-dropdown__wrap{
  position: relative;
}

.hl-autocomplete-dropdown__container .hl-autocomplete-dropdown__item{
  position: relative;
  width: 100%;
  height: 34px;
  line-height: 34px;
  color:#666666;
  padding: 0 10px;
  box-sizing: border-box;
  overflow: hidden;
  cursor: pointer;
}


/*
==================================
  hl-divider 组件样式
==================================
*/

.hl-divider-container .hl-divider-horizontal{
  position: relative;
  height: 1px;
  margin: 15px 0;
  border-bottom: 1px solid #F2F2F2;
}

.hl-divider-container .hl-divider-horizontal.is-dashed{
  border-bottom: 1px dashed #F2F2F2;
}

.hl-divider-container .hl-divider-vertical{
  position: relative;
  display: inline-block;
  width: 1px;
  height: 18px;
  line-height: 18px;
  margin: 0px 8px;
  border-left: 1px solid #F2F2F2;
  vertical-align:middle;
}

.hl-divider-container .hl-divider-vertical.is-dashed{
  border-left: 1px dashed #F2F2F2;
}

/*
==================================
  hl-layout 组件样式
==================================
*/
.hl-row{
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
}
.hl-row::after,
.hl-row::before{
  display: table;
  content: '';
}
[class*=hl-col-]{
  float: left;
  box-sizing: border-box;
}
.hl-col-1{
  width: 4.16667%
}
.hl-col-2{
  width: 8.33333%
}
.hl-col-3{
  width: 12.5%
}
.hl-col-4{
  width: 16.66667%
}
.hl-col-5{
  width: 20.83333%
}
.hl-col-6{
  width: 25%
}
.hl-col-7{
  width: 29.16667%
}
.hl-col-8{
  width: 33.33334%
}
.hl-col-9{
  width: 37.5%
}
.hl-col-10{
  width: 41.66667%
}
.hl-col-11{
  width: 45.83334%
}
.hl-col-12{
  width: 50%
}

.hl-col-13{
  width: 54.16667%
}
.hl-col-14{
  width: 58.33334%
}
.hl-col-15{
  width: 62.5%
}
.hl-col-16{
  width: 66.66667%
}
.hl-col-17{
  width: 70.83334%
}
.hl-col-18{
  width: 75%
}
.hl-col-19{
  width: 79.16667%
}
.hl-col-20{
  width: 83.33334%
}
.hl-col-21{
  width: 87.5%
}
.hl-col-22{
  width: 91.66667%
}
.hl-col-23{
  width: 95.83334%
}
.hl-col-24{
  width: 100%
}

.hl-col-offset-1{
  margin-left: 4.16667%
}
.hl-col-offset-2{
  margin-left: 8.33333%
}
.hl-col-offset-3{
  margin-left: 12.5%
}
.hl-col-offset-4{
  margin-left: 16.66667%
}
.hl-col-offset-5{
  margin-left: 20.83333%
}
.hl-col-offset-6{
  margin-left: 25%
}
.hl-col-offset-7{
  margin-left: 29.16667%
}
.hl-col-offset-8{
  margin-left: 33.33334%
}
.hl-col-offset-9{
  margin-left: 37.5%
}
.hl-col-offset-10{
  margin-left: 41.66667%
}
.hl-col-offset-11{
  margin-left: 45.83334%
}
.hl-col-offset-12{
  margin-left: 50%
}

.hl-col-offset-13{
  margin-left: 54.16667%
}
.hl-col-offset-14{
  margin-left: 58.33334%
}
.hl-col-offset-15{
  margin-left: 62.5%
}
.hl-col-offset-16{
  margin-left: 66.66667%
}
.hl-col-offset-17{
  margin-left: 70.83334%
}
.hl-col-offset-18{
  margin-left: 75%
}
.hl-col-offset-19{
  margin-left: 79.16667%
}
.hl-col-offset-20{
  margin-left: 83.33334%
}
.hl-col-offset-21{
  margin-left: 87.5%
}
.hl-col-offset-22{
  margin-left: 91.66667%
}
.hl-col-offset-23{
  margin-left: 95.83334%
}
.hl-col-offset-24{
  margin-left: 100%
}

.hl-row--flex{
  display: flex;
}
.hl-row--flex.is-justify-start{
  justify-content: start;
}
.hl-row--flex.is-justify-end{
  justify-content: end;
}
.hl-row--flex.is-justify-center{
  justify-content: center;
}
.hl-row--flex.is-justify-space-around{
  justify-content: space-around;
}
.hl-row--flex.is-justify-space-between{
  justify-content: space-between;
}

.hl-row--flex.is-align-middle{
  box-align:center;
  align-items: center;
}
.hl-row--flex.is-align-bottom{
  box-align:end;
  align-items: flex-end;
}

/*
==================================
  hl-dialog 组件样式
==================================
*/
.hl-dialog-container{
  position: fixed;
  top:0;
  left:0;
  right:0;
  bottom: 0;
  background-color: rgba(0,0,0,0.3);
	display: flex;
	justify-content: center;
	align-items: center;
  z-index: 2000;
}

.hl-dialog{
  position: relative;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 0 18px rgba(80,80,80,.75);
  box-sizing: border-box;
}
.hl-dialog .hl-dialog__title{
  position: relative;
  height: 46px;
  line-height: 46px;
  background-color: #fff;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  color: #666666;
  font-weight: bolder;
  font-size: 16px;
  text-align: center;
}

.hl-dialog .hl-dialog__title .close-icon{
  position: absolute;
  top:50%;
  right:10px;
  transform: translate(0,-50%);
  color:#999;
  font-size: 16px;
  cursor: pointer;
}

.hl-dialog .hl-dialog__body{
  position: relative;
  max-height: 350px;
  padding: 19px 30px;
  overflow-y: auto;
  background-color: #F9F9F9;
}

.hl-dialog .hl-dialog__body.is-bottom-raidus{
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}

.hl-dialog .hl-dialog__footer{
  padding: 10px 0;
  position: relative;
  text-align: center;
  background-color: #fff;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}

.hl-dialog .hl-dialog__footer .hl-button+.hl-button{
  margin-left: 30px;
}

/*
==================================
  hl-page-header 组件样式
==================================
*/
.hl-page-header-container{
  position: relative;
  box-sizing: border-box;
  height: 56px;
  border-bottom: 1px solid #e5e5e5;
  background-color: #fff;
}

.hl-page-header-container .hl-page-header__title{
  float: left;
  line-height: 56px;
}

.hl-page-header-container .hl-page-header__name{
  float: left;
  font-weight: 500;
  font-size: 16px;
  color:#666;
}

.hl-page-header__operation{
  float: right;
  line-height: 56px;
}

/*
==================================
  hl-secondary-tree 组件样式
==================================
*/
.hl-secondary-tree__container input{
  border: 0;
  border-radius: 4px;
  appearance:none;
  overflow: visible;
  height: 34px;
  padding: 0 4px;
}

.hl-secondary-tree__container input:focus{
  border: 1px solid #5AA9E1;
  box-shadow:0px 0px 6px 0px rgba(105,191,214,0.5);
}

.hl-secondary-tree__container .hl-secondary-tree__node{
  position: relative;
  height: 50px;
  line-height: 50px;
  box-sizing: border-box;
  border-bottom: 1px solid #E6E6E6;
  background-color: #fff;
  overflow: hidden;
}


.hl-secondary-tree__container .hl-secondary-tree__firstmenu .hl-secondary-tree__node{
  padding-left: 17px;
}

.hl-secondary-tree__container .hl-secondary-tree__secondmenu .hl-secondary-tree__node{
  padding-left: 36px;
}

.hl-secondary-tree__container .hl-secondary-tree__node:hover{
  background-color: #F7F7F7;
}

.hl-secondary-tree__container .hl-secondary-tree__node .hl-secondary-tree__firstmenu-name{
  float: left;
  color:#4B4B4B;
  font-size: 14px;
  font-weight: 500;
}

.hl-secondary-tree__container .hl-secondary-tree__node.selected{
  background-color: #565E99;
}

.hl-secondary-tree__container .hl-secondary-tree__node.selected .hl-secondary-tree__firstmenu-name,
.hl-secondary-tree__container .hl-secondary-tree__node.selected .hl-secondary-tree__secondmenu-name
{
  color:#fff;
}

.hl-secondary-tree__container .hl-secondary-tree__node.selected .features-node{
  color:#fff;
}

.hl-secondary-tree__container .hl-secondary-tree__node .hl-secondary-tree__secondmenu-name{
  float: left;
  color:#666666;
  font-size: 14px;
}
.hl-secondary-tree__container .hl-secondary-tree__node .features-node{
  display: none;
  box-sizing: border-box;
  float: right;
  margin-right: 10px;
  margin-top: 17px;
  cursor: pointer;
}
.hl-secondary-tree__container .hl-secondary-tree__node:hover .features-node{
  display: block;
}

.hl-secondary-tree__add-wrap{
  position: relative;
  height: 50px;
  line-height: 50px;
  box-sizing: border-box;
  border-bottom: 1px solid #E6E6E6;
  background-color: #fff;
  overflow: hidden;
}

.hl-secondary-tree__add-wrap .features-node{
  float: right;
  margin-right: 10px;
  margin-top: 17px;
  cursor: pointer;
}

/*
==================================
  hl-date 组件样式
==================================
*/

.hl-date-container {
  position: relative;
  width: 100%;
  height: 34px;
}
.hl-date-container-default {
	background: rgba(249, 249, 249, 1);
	height: 34px;
	border-radius: 4px;
}

.hl-date-container-primary {
	background: #fff;
	box-shadow: 0 0 4px rgba(214,214,214,1) inset;
	height: 34px;
	border-radius: 4px;
}
.hl-date-wrap {
  width: 100%;
  height: 100%;
  position: relative;
}
.hl-date-text {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  font-size: 14px;
  color: #666;
  border-radius: 4px;git
  outline: medium;
  text-indent: 13px;
  cursor: pointer;
  box-sizing: border-box;
	background: none;
  padding: 0;
  margin: 0;
  border: 0;
}

.hl-date-text:focus{
  border: 1px solid #98c3ed;
  outline: 0;
  /* -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
          box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6); */
}

.hl-date-icon {
  position: absolute;
  right: 10px;
  top: 0;
  line-height: 34px;
  font-size: 14px;
  color: #999;
}
.hl-date-calendar {
  width: 290px;
  padding: 6px;
  background-color: #fff;
  position: absolute;
  top: 100%;
  margin-top: 5px;
  left: 0;
  box-shadow: 0 0 8px rgba(165,165,165,1);
  border-radius: 6px;
  z-index: 999;
}
.hl-date-week {
  height: 32px;
  background-color: #f7f7f7;
  display: flex;
}
.hl-date-week-li {
  flex: 1;
  font-size: 14px;
  line-height: 32px;
  text-align: center;
  color: #999;
}
.hl-date-day {
  display: flex;
  text-align: center;
  flex-wrap: wrap;
}
.hl-date-day-li {
  width: 14.285%;
  height: 40px;
  line-height: 40px;
  font-size: 14px;
  color: #666;
  cursor: pointer;
}
.hl-date-active {
  background-color: #78ddaa;
  box-shadow: 0 0 4px #d3dce2;
  border-radius: 4px;
  color: #fff;
}
.hl-date-scope{
  color: #999;
}
.hl-date-clear {
  height: 46px;
  line-height: 46px;
  display: flex;
  justify-content: space-between;
  margin: 0 6px;
}
.hl-date-select-wrap {
  position: relative;
}
.hl-date-sn-sel {
  position: absolute;
  left: 0;
  width: 100%;
  top: 100%;
  background-color: #fff;
  height: 220px;
  box-shadow: 0 0 5px rgba(0,0,0,.1);
  overflow-y: scroll;
}
.hl-date-sn-li {
  text-indent: 10px;
  font-size: 14px;
  line-height: 28px;
  text-align: center;
  color: #666;
  cursor: pointer;
}
.hl-date-sn-li:hover {
  background-color: #78ddaa;
  color: #fff;
  border-radius: 3px;
}
.hl-date-select {
  display: flex;
  justify-content: space-between;
  width: 100px;
}
.hl-date-button {
  font-size: 16px;
  line-height: 46px;
  color: #666;
  cursor: pointer;
}

.hl-date-select-span{
  width: 80px;
  font-size: 14px;
  line-height: 46px;
  color: #666;
  text-align: center;
  cursor: pointer;
}

.hl-date-time input {
  width: 17px;
  height: 31px;
  line-height: 31px;
  border: 0;
  color: #666;
  background-color: #fff;
  outline: medium;
  text-align: center;
  border-radius: 4px;
}
.hl-date-time input:focus {
  box-shadow: 0 0 4px rgba(214,214,214,.75) inset;
}
.hl-date-time span {
  color: #999;
}
.hl-date-hour {
  text-align: right;
}
.hl-date-container .hl-date-icon::before {
  top: 0;
  right: 0;
}
input::-webkit-input-placeholder{
  color: #999 !important;
}
input::-moz-placeholder{   /* Mozilla Firefox 19+ */
  color: #999 !important;
}
input:-moz-placeholder{    /* Mozilla Firefox 4 to 18 */
  color: #999 !important;
}
input:-ms-input-placeholder{  /* Internet Explorer 10-11 */
  color: #999 !important;
}

/*
==================================
  hl-pagination 分页组件样式
==================================
*/
.hl-turn-page li {
	height: 34px;
	border: 1px solid #ddd;
	background: -webkit-gradient(linear, 0 0, 0 bottom, from(#fcfcfc), to(#ececec));
	padding: 0 14px;
  border-radius:4px;
}
.hl-turn-page li.active {
	border: solid 1px #5e67a5;
	background: #5e67a5;
	color: #fff;
}

/*
==================================
  hl-table 非自定义列表组件样式
==================================
*/
.hl-config-table-operate-wrap{
  position: absolute;
  right: 0;
  top: 0;
  border-bottom: 0;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  border-left: 1px solid #e5e5e5;
}
.hl-global_table_title{
  background-color: #F0F2FF;
  color: #A5AAB7;
  font-weight: 500;
}
.hl-global_table_item{
  padding: 0 8px;
}
.global_table .hl-global_table_item:nth-child(2n+1){
  background-color: #fff;
}

.global_table .slideRight{
  background-color: #F0F0F7!important;
}

.global_table .hl-global_table_item:nth-child(2n){
  background-color: #F9F9F9;
}
.hl-global_table_item a{
  margin: 0 5px;
}

/*
==================================
  hl-popover 组件样式
==================================
*/
.hl-popover{
  position: fixed;
  left:1000000px;
  top:1000000px;
  background-color: #fff;
  min-width: 150px;
  border-radius: 4px;
  border: 1px solid #ebeef5;
  padding: 12px;
  z-index: 2000;
  color:#666;
  line-height: 1.4;
  text-align: justify;
  font-size: 14px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.hl-popover.hl-placement-top{
  margin-bottom: 12px;
}

.hl-popover.hl-placement-right{
  margin-left: 12px;
}

.hl-popover.hl-placement-bottom{
  margin-top: 12px;
}

.hl-popover.hl-placement-left{
  margin-right: 12px;
}

.hl-popover .hl-popover__title{
  font-weight: bold;
  font-size: 16px;
  margin-bottom: 6px;
}

.hl-popover .hl-popover__arrow{
  position: absolute;
  // filter: drop-shadow(0 2px 12px 0 rgba(0, 0, 0, 0.03));
}

.hl-popover.hl-placement-top .hl-popover__arrow{
  left:50%;
  bottom:0;
}
.hl-popover.hl-placement-right .hl-popover__arrow{
  top:50%;
  left:-12px;
}
.hl-popover.hl-placement-bottom .hl-popover__arrow{
  left:50%;
  top:-12px;
}
.hl-popover.hl-placement-left .hl-popover__arrow{
  top:50%;
  right:0;
}

.hl-popover .hl-popover__arrow::after{
  position: absolute;
  content: '';
  width: 0;
  height: 0;
  border-width: 6px;
}

.hl-popover.hl-placement-top .hl-popover__arrow::after{
  border-style: solid dashed dashed dashed;
  border-color: #fff transparent transparent transparent;
}

.hl-popover.hl-placement-right .hl-popover__arrow::after{
  border-style: dashed solid dashed dashed;
  border-color: transparent #fff transparent transparent;
}

.hl-popover.hl-placement-bottom .hl-popover__arrow::after{
  border-style: dashed dashed solid dashed;
  border-color: transparent transparent #fff transparent;
}

.hl-popover.hl-placement-left .hl-popover__arrow::after{
  border-style: dashed dashed dashed solid;
  border-color: transparent transparent transparent #fff;
}

/*
==================================
  hl-dropdown 组件样式
==================================
*/
.hl-dropdown{
  position: fixed;
  left:1000000px;
  top:1000000px;
  background-color: #fff;
  min-width: 150px;
  border-radius: 4px;
  border: 1px solid #ebeef5;
  z-index: 2000;
  color:#666;
  line-height: 1.4;
  text-align: justify;
  font-size: 14px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.hl-dropdown.hl-placement-top{
  margin-bottom: 12px;
}

.hl-dropdown.hl-placement-right{
  margin-left: 12px;
}

.hl-dropdown.hl-placement-bottom{
  margin-top: 12px;
}

.hl-dropdown.hl-placement-left{
  margin-right: 12px;
}

.hl-dropdown .hl-dropdown__wrap{
  position: relative;
  background-color: #fff;
  border-radius: 4px;
}

.hl-dropdown .hl-dropdown__item{
  height: 40px;
  line-height: 40px;
  color:#666;
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  padding: 0 6px;
  overflow: hidden;
  cursor: pointer;
}

.hl-dropdown .hl-dropdown__item:first-child{
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

.hl-dropdown .hl-dropdown__item:last-child{
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}

.hl-dropdown .hl-dropdown__item.is-selected{
  background-color: #F9F9F9;
  color: #5E67A5;
}


.hl-dropdown .hl-dropdown__arrow{
  position: absolute;
  // filter: drop-shadow(0 2px 12px 0 rgba(0, 0, 0, 0.03));
}

.hl-dropdown.hl-placement-top .hl-dropdown__arrow{
  left:50%;
  bottom:0;
}
.hl-dropdown.hl-placement-right .hl-dropdown__arrow{
  top:50%;
  left:-12px;
}
.hl-dropdown.hl-placement-bottom .hl-dropdown__arrow{
  left:50%;
  top:-12px;
}
.hl-dropdown.hl-placement-left .hl-dropdown__arrow{
  top:50%;
  right:0;
}

.hl-dropdown .hl-dropdown__arrow::after{
  position: absolute;
  content: '';
  width: 0;
  height: 0;
  border-width: 6px;
}

.hl-dropdown.hl-placement-top .hl-dropdown__arrow::after{
  border-style: solid dashed dashed dashed;
  border-color: #fff transparent transparent transparent;
}

.hl-dropdown.hl-placement-right .hl-dropdown__arrow::after{
  border-style: dashed solid dashed dashed;
  border-color: transparent #fff transparent transparent;
}

.hl-dropdown.hl-placement-bottom .hl-dropdown__arrow::after{
  border-style: dashed dashed solid dashed;
  border-color: transparent transparent #fff transparent;
}

.hl-dropdown.hl-placement-left .hl-dropdown__arrow::after{
  border-style: dashed dashed dashed solid;
  border-color: transparent transparent transparent #fff;
}

/*
==================================
  hl-cascader 组件样式
==================================
*/
.hl-cascader__container{
  position: relative;
  display: inline-block;
}
.hl-cascader__header{
  position: relative;
}
.hl-cascader__header .hl-cascader__input{
  box-sizing: border-box;
  position: relative;
  width: 100%;
  height: 34px;
  line-height: 34px;
  padding: 0 20px 0 10px;
  color:#666;
  border-radius:4px;
  cursor: pointer;
}

.hl-cascader__header.hl-cascader-default .hl-cascader__input{
  background-color: #f9f9f9;
  border: 1px solid #f9f9f9;
}

.hl-cascader__header.hl-cascader-primary .hl-cascader__input{
  background-color: #fff;
  border:1px solid rgba(229,229,229,1);
  box-shadow:0px 0px 4px 0px #E5E5E5 inset;
}

.hl-cascader__header.hl-cascader-text .hl-cascader__input{
  background-color: #fff;
  border: 1px solid transparent;
}

.hl-cascader__header.hl-cascader-default .hl-cascader__input:focus{
  border: 1px solid #5AA9E1;
  outline: 0;
}

.hl-cascader__header.hl-cascader-primary .hl-cascader__input:focus{
  border-color: #98c3ed;
  outline: 0;
  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
          box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
}

.hl-cascader__header .hl-cascader__input::-webkit-input-placeholder{
  color:#CCCCCC ;
}

.hl-cascader__container .hl-cascader__header .icon{
  position: absolute;
  right:18px;
  top:40%;
  transform: translate(0,-50%);
  color:#D8D8D8;
}

.hl-cascader__container .hl-cascader__header .hl-arrow-down-icon::before{
  position: absolute;
  content: '';
  width: 0;
  height: 0;
  border-width: 6px;
  border-style: solid dashed dashed dashed;
  border-color: #dbdbdb transparent transparent transparent;
}

.hl-cascader-dropdown__container{
  position: absolute;
  top:35px;
  box-shadow: 0px 2px 4px 0px rgba(153,153,153,0.5);
  border-radius: 4px;
  overflow-y: scroll;
  z-index: 999;
}

.hl-cascader-dropdown__container .hl-cascader-dropdown__wrap{
  position: relative;
}

.hl-cascader-dropdown__container .hl-cascader-dropdown__item{
  position: relative;
  width: 100%;
  height: 34px;
  line-height: 34px;
  color:#666666;
  padding: 0 10px;
  box-sizing: border-box;
  overflow: hidden;
  cursor: pointer;
  background-color: #fff;
}

.hl-cascader-dropdown__container .hl-cascader-dropdown__item.active{
  background-color: #5E67A5;
  color:#fff;
}

.hl-cascader-dropdown__container .hl-cascader-dropdown__item .icon{
  position: absolute;
  right:0px;
  top:50%;
  transform: translate(0,-50%);
  color:#E9E9E9;
  font-size: 12px;
}

.hl-cascader-dropdown__container.hl-cascader-dropdown__first-node{
  left:0;
}

/*
==================================
  pagination 分页组件样式
==================================
*/
.hl-pagination__container{
  position: relative;
}

.hl-pagination__container .hl-pagination__wrap{
  display: flex;
  height: 34px;
  line-height: 34px;
}

.hl-pagination__container .hl-pagination__button{
  box-sizing: border-box;
  height: 34px;
  line-height: 34px;
  border: 1px solid #ddd;
  background: -webkit-gradient(linear, 0 0, 0 bottom, from(#fcfcfc), to(#ececec));
  padding: 5 10px;
  border-radius: 4px;
  margin-right: 5px;
  cursor: pointer;
}

.hl-pagination__container .hl-pagination__button:last-child{
  margin-right: 0
}

.hl-pagination__container .hl-pagination__button.active{
  border:solid 1px #5e67a5;
  background-color: #5e67a5;
  color:#fff;
}

.hl-pagination__container .hl-pagination__button:hover{
  border:1px solid #5e67a5;
}

/*
==================================
  steps 组件样式
==================================
*/
.hl-steps-container{
  display: flex;
}

.hl-steps__horizontal{
  white-space: nowrap;
}

.hl-steps__vertical{
  height: 100%;
  flex-flow:column;
}

.hl-step-container{
  position: relative;
  flex-shrink: 1;
}

.hl-step-container.is-horizontal{
  display: inline-block;
}

.hl-step-container.is-horizontal .hl-step__line{
  height: 2px;
  top: 14px;
  left: 0;
  right: 0;
}

.hl-step-container:last-of-type.is-flex{
  flex-basis: auto!important;
  flex-shrink: 0;
  flex-grow: 0;
}

.hl-step__line{
  position: absolute;
  border-color:inherit;
}

.hl-step__line.is-wait{
  background-color: #5E67A5;
}

.hl-step__line.is-disabled{
  background-color: rgba(215,215,215,0.4);
}

.hl-step__line.is-on{
  background:linear-gradient(90deg,rgba(86,94,153,1) 0%,rgba(255,255,255,1) 100%);
}

.hl-step__line-inner{
  display: block;
  border: 1px solid;
  border-color:inherit;
  transition: .15s ease-out;
  box-sizing: border-box;
  width:0;
  height: 0;
}

.hl-step__icon-container.is-on{
  position: relative;
  top: -6px;
  z-index: 1;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width:44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid #5E67A5;
  box-sizing: border-box;
  background-color: #fff;
  transition: .15s ease-out;
}

.hl-step__icon{
  position: relative;
  z-index: 1;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width:32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid;
  border-color: inherit;
  font-size: 14px;
  color:#fff;
  box-sizing: border-box;
  background-color: #5E67A5;
  transition: .15s ease-out
}

.hl-step__icon-container.is-disabled .hl-step__icon{
  border: 1px solid #999999;
  background-color: #fff;
  color:#999999;
}

.hl-step__icon-container.is-success .hl-step__icon{
  border: 1px solid #5E67A5;
  background-color: #fff;
  color:#5E67A5;
}

.hl-step__icon-success{
  font-size: 18px;
  font-weight: bolder;
}

.hl-step__icon-inner{
  display: inline-block;
  user-select: none;
  text-align: center;
  font-weight: 700;
  line-height:1;
  color:inherit;
}

.hl-step__main{
  white-space: normal;
  text-align: left;
}

.hl-step__title{
  font-size: 14px;
  line-height: 20px;
  color:#5E67A5;
  margin-top: 12px;
}

.hl-step__title.is-on{
  margin-top: 0px;
}

.hl-step__title.is-disabled{
  color:#999999;
}
